<!--所有值/组内-->
<template>
    <div class="all-values">
        <el-form>
            <el-form-item label="取值规则">
               <el-select size="mini" v-model="valueRule" @change="valueRuleHandle">
                   <el-option
                        v-for="item in valueRuleList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
               </el-select>
            </el-form-item>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="数值来自">
                        <el-select size="mini" v-model="numValue" @change="changePlaceholder">
                            <el-option
                                v-for="(item,index) in numValueList"
                                :key="index"
                                :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
<!--                        <num-value-select :menu-id="menuId"></num-value-select>-->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="统计方式">
                        <el-select size="mini" v-model="statisticalMethod" @change="changePlaceholder">
                            <el-option
                                v-for="item in statisticalMethodList"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="group-method" v-show="valueRule === '2'">
                <el-form-item label="分组方式">
                    <grouping-method ref="groupingMethod" @insertPlaceholder="getGroupMethod" ></grouping-method>
                </el-form-item>
            </el-row>
            <el-form-item label="取值描述">
                <el-input type="textarea" style="width: 90%" rows="8" :placeholder="placeholderValue" readonly></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import GroupingMethod from '../../../components/addRow/GroupingMethod'
    import NumValueSelect from '../../../components/addRow/NumValueSelect'
    export default {
        name: 'AllValues',
        components: {
            GroupingMethod,
            NumValueSelect
        },
        data () {
            return {
                valueRule: '', // 取值规则
                valueRuleList: [
                    {
                        value: '1',
                        label: '所有值'
                    }, {
                        value: '2',
                        label: '组内所有值'
                    }
                ],
                numValue: '', // 数组来自绑定值
                numValueList: [],
                statisticalMethod: '', // 统计方式
                statisticalMethodList: [
                    {
                        value: '1',
                        label: '求和'
                    }, {
                        value: '2',
                        label: '平均'
                    }, {
                        value: '3',
                        label: '最大值'
                    }, {
                        value: '4',
                        label: '最小值'
                    }
                ],
                placeholderValue: '', // 文本域绑定值
                groupMethodValue: [], // 分组方式接收值
                prependVal: '',
                appendVal: '',
                groupValue: '',
                columnInfo: [],
                tempList: [],
                selects: [],
                ordered: [],
                pageMode: ''
            }
        },
        props: {
            menuId: {
                type: String
            }
        },
        methods: {
            // 取值规则改变
            valueRuleHandle () {
                this.prependVal = ''
                this.appendVal = ''
                debugger
                this.getMethodValue()
                this.placeholderValue = `所有 【${this.prependVal}】 ${this.appendVal}`
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    value3: this.statisticalMethod,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                console.info(param)
                this.$emit('getAllValues', param)
            },
            saveColumnInfo (val) {
                this.handleTreeValue(val)
                this.valueRule = '1'
                this.numValue = this.numValueList.length > 0 ? this.numValueList[0].value : ''
                this.statisticalMethod = this.statisticalMethodList[0].value
                this.placeholderValue = `所有【${this.numValueList[0].label}】${this.statisticalMethodList[0].label}`
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    value3: this.statisticalMethod,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getAllValues', param)
            },
            // 编辑接收值
            editData (dataValue) {
                this.valueRule = dataValue.value1
                this.numValue = dataValue.value2
                this.statisticalMethod = dataValue.value3
                this.placeholderValue = dataValue.text
                this.selects = dataValue.selects
                this.ordered = dataValue.ordered
                this.$refs.groupingMethod.editData(dataValue, '1')
                // let param = {
                //     value1: this.valueRule,
                //     value2: this.numValue,
                //     value3: this.statisticalMethod,
                //     text: this.placeholderValue,
                //     selects: this.selects,
                //     ordered: this.ordered
                // }
                // this.$emit('getAllValues', param)
            },
            // 接收树的值进行处理
            handleTreeValue (treeValue) {
                this.columnInfo = treeValue
                this.$refs.groupingMethod.getListData(treeValue, '1')
                this.tempList = this.columnInfo[2].children
                if (this.tempList.length > 0) {
                    this.tempList.forEach(item => {
                        this.numValueList.push({
                            value: item.enName,
                            label: item.name
                        })
                    })
                }
},
            changePlaceholder () {
                debugger
                if (this.groupMethodValue.length === 0) {
                    this.prependVal = ''
                    this.appendVal = ''
                    this.getMethodValue()
                    this.placeholderValue = `所有 【${this.prependVal}】 ${this.appendVal}`
                } else {
                    this.getMethodValue()
                    this.placeholderValue = `${this.groupValue}中的 【${this.prependVal}】 ${this.appendVal}`
                }
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    value3: this.statisticalMethod,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                console.info(param)
                this.$emit('getAllValues', param)
            },
            // 获取对应标签值
            getLabel (dataList, val) {
                let label = ''
                dataList.forEach(item => {
                    if (item.value === val) {
                        label = item.label
                    }
                })
                return label
            },
            // 根据对应方式生成拼接的标签值
            getMethodValue () {
                    this.prependVal = this.getLabel(this.numValueList, this.numValue)
                    this.appendVal = this.getLabel(this.statisticalMethodList, this.statisticalMethod)
            },
            // 获取分组方式组件的值
            getGroupMethod (val) {
                debugger
                this.groupMethodValue = val.selects
                this.groupValue = ''
                for (let i = 0; i < this.groupMethodValue.length; i++) {
                    this.groupValue += ` 同一 【${this.groupMethodValue[i].name}】`
                }
                if (this.prependVal === '') {
                    this.prependVal = this.getLabel(this.numValueList, this.numValue)
                }
                if (this.appendVal === '') {
                    this.appendVal = this.getLabel(this.statisticalMethodList, this.statisticalMethod)
                }
                if (this.groupMethodValue.length === 0) {
                    this.placeholderValue = `所有 【${this.prependVal}】 ${this.appendVal}`
                } else {
                    this.placeholderValue = `${this.groupValue}中的 【${this.prependVal}】 ${this.appendVal}`
                }
                console.info(this.valueRule)
                this.selects = val.selects
                this.ordered = val.ordered
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    value3: this.statisticalMethod,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                console.info(param)
                this.$emit('getAllValues', param)
            }
        },
        created () {

        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .all-values
        .el-form
            margin-top 10px
            .el-form-item
                margin-bottom 0px
            .group-method
                margin-bottom 10px
</style>
